<template>
    <div class="user_information_box userInfo outer_shadows"
         :class="{'shutdown':shutDown}"
         v-show="store.state.userWindow && store.state.user">
        <div class="user_information_content">
            <span class="user_information_shut_down_but" @click="down"><img src="/public/img/right.png" alt=""></span>
            <ul class="user_information_detail">
                <li><span>Name：</span>
                    <input type="text" v-if="userUsername" @click="userUsername=false"
                           v-model="store.state.user.username"/>
                    <input type="text" v-else v-model.trim="userInfo.username"/>
                </li>
                <li><span>Pas：</span>
                    <input type="text" v-model.trim="userInfo.password"/>
                </li>
                <li class="user_information_detail_auto"><span>Auto:</span>
                    <p>{{ store.state.user.auto }}</p></li>
                <li class="user_information_detail_auto"><span>Email:</span>
                    <p>{{ store.state.user.email }}</p></li>
            </ul>
            <p class="user_information_size" @click="unread_messages">共{{ store.state.commentsSize }}条未读信息</p>
            <button @click="logout" class="user_information_logout">登出</button>
            <button @click="logoff" style="margin-left: 20px;background: #f60a3b" class="user_information_logout">注销</button>
            <button @click="saveUserInfo"  class="user_information_save">保存</button>

        </div>
    </div>
</template>
<!--用户信息-->
<script setup>
import store from "@/store/index.js";
import {onMounted, ref} from "vue";
import api from "@/request/index.js";

//.评论信息事件
const unread_messages = () => {
    store.commit('unread_messages', true);
}

//是否显示更新个人信息名称
const userUsername = ref(true)


//修改的信息
const userInfo = {
    username: "",
    password: "*********"
}


//更新个人信息
const saveUserInfo = () => {
    if (userInfo.password === "*********") {
        userInfo.password = ""
    }
    api.saveUserInfo(userInfo).then((res) => {
        if (res.data.code === 200) {
            if (userInfo.password !== "") {
                window.localStorage.removeItem("user")
                window.localStorage.removeItem("AUTHORIZATION_TOKEN")
                setTimeout(() => {
                    store.commit('user', null);
                }, 200)
                store.commit('info_sub', {msg: "密码已修改请重新登录", type: "normal"})
            }else {
                store.commit('info_sub', {msg: "修改成功", type: "normal"})
            }

        } else {
            store.commit('info_sub', {msg: "修改失败", type: "warn"})
        }
    })

}

//注销
const logoff = ()=>{
  api.logoff().then((res)=>{
      if(res.data.code === 200){
          store.commit('info_sub', {msg: "已注销账号", type: "normal"})
          window.localStorage.removeItem("user");
          window.localStorage.removeItem("AUTHORIZATION_TOKEN");
          setTimeout(() => {
              store.commit('user', null);
          }, 200)
      }
  })
}

//关闭用户信息窗口
const down = () => {
    shutDown.value = true
    setTimeout(() => {
        store.commit('userWindow', false);
        shutDown.value = false
    }, 400)

}
//退出登陆
const logout = () => {
    down();
    store.commit('info_sub', {msg: "退出登录成功", type: "normal"})
    window.localStorage.removeItem("user");
    window.localStorage.removeItem("AUTHORIZATION_TOKEN");
    setTimeout(() => {
        store.commit('user', null);
    }, 200)
    api.logout().then();

}
//开启关闭动画
const shutDown = ref(false);

</script>

<style scoped>
.user_information_box {
    position: fixed;
    top: 10%;
    right: 0;
    width: 220px;
    padding: 15px;
    font-size: 15px;
    transform: translateX(0);
    transform-origin: top;
    box-shadow: 0 0 2px 0 rgba(64, 68, 72, 0.5);
    animation: userInfo .3s ease-in-out 0s 1 forwards;
}

.user_information_detail {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    list-style: none;


}

.user_information_detail span {
    display: flex;
    width: 55px;
}

.user_information_detail input {
    border: 0;
    outline: none;
    width: 120px;
    border-bottom: 1px solid #606162;
    padding: 5px;
    text-indent: 5px;
    color: #6da6e1;
    background: transparent;
}

.user_information_detail li {
    font-size: 13px;
    margin: 5px 0;
    display: flex;
}

.user_information_detail_auto {
    display: flex;
    justify-content: space-between;

}

.user_information_detail_auto p {
    width: 75%;
}

.user_information_avatar {
    width: 60px;
    height: 60px;
    border-radius: 3px;
    margin-right: 5px;
    object-fit: cover;
}


.user_information_chapters li {

    margin: 0 10px;

}

.user_information_chapters li img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.user_information_login a {
    font-size: 14px;
}

.user_information_login span {
    font-size: 13px;
}

.user_information_content {
    position: relative;
}

.user_information_shut_down_but {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: -15px;
    transform: translateX(-100%) translateY(-15px);
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.user_information_shut_down_but img {
    width: 100%;
    height: 100%;
    padding: 3px;
}

.shutdown {
    animation: shutdown .3s ease-in-out 0s 1 forwards;
}

.user_information_logout, .user_information_save {
    outline: none;
    cursor: pointer;
    background: #6da6e1;
    color: white;
    padding: 2px 5px;
    margin-top: 20px;
    transition: all .3s;
    border: 1px solid transparent;
    font-size: 13px !important;
}

.user_information_save {
    margin-left: 20px;
    opacity: 0;
    animation: user_information_save 1s ease 0s 1 forwards;
}

@keyframes user_information_save {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.user_information_logout{
    background: #f6aa06;
}
.user_information_logout:hover {
    background: white;
    color: #6da6e1;
    border: 1px solid #6da6e1;
}

.user_information_size {
    font-size: 14px;
    color: #6da6e1;
}

.user_information_size:hover {
    cursor: pointer;
    text-decoration: underline;
}

@keyframes shutdown {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(120%);
    }
}

@keyframes userInfo {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}
</style>